import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography, Button } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import { Test } from '@/services/login';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/swiper.min.css';
import 'swiper/components/navigation/navigation.min.css';
import 'swiper/components/thumbs/thumbs.min.css';

import SwiperCore, { Navigation, Thumbs, Autoplay } from 'swiper/core';

import styles from './Welcome.less';

SwiperCore.use([Navigation, Thumbs, Autoplay]);

const CodePreview: React.FC = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);

const picArr = [
  'http://image.photocnc.com/photocnc/2020-05/27/202005270230057359.Jpeg.w1680.jpg',
  'https://ae01.alicdn.com/kf/H1e8aeda49c324594b62dd1e8123e96f0j.png',
  'https://img.tt98.com/d/file/tt98/2019111217001559/5dca7072355c1.jpg',
  'https://pic1.zhimg.com/80/v2-b174028647e4525f7711d9f0cc5a3e84_1440w.jpg',
  'https://wallpaperm.cmcm.com/e7da97fe79ef1e93ad8b54dba823671c.jpg',
  'https://lh3.googleusercontent.com/proxy/fMoFtLgMFUNheAeujQRpBLpH0ZmXB-x0Sat2EHBnz8kCohsOI9R55Rg5co059ue6gkLPBUFeGlBIh-KDJ-LTKrnsqMuAkg',
  'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0504%2Fc3813e8cj00qsjwzt001bc000hs00b4c.jpg&thumbnail=650x2147483647&quality=80&type=jpg',
  'https://ae01.alicdn.com/kf/H7ffcdf15c1644cfb9c0da7d4ba2f3360f.jpg',
  'https://lh3.googleusercontent.com/proxy/VWdxkaNZ7HqMSsarztCMNOc-FMsMHtY_1m9xVwBNkYhplFr7oQcuxaGrN1GL32qfc5ohkYBVO7R5BH062d85JWGi0wdj6K2FyYC8bqXFutzum2VIEXE',
];

export default (): React.ReactNode => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const intl = useIntl();
  const onTest = async () => {
    const res = await Test();
    console.log(res);
  };
  return (
    <PageContainer>
      <Card>
        <div className={styles.swiperContainer}>
          <Swiper
            // disableOnInteraction={false}
            autoplay
            loop
            spaceBetween={10}
            thumbs={{ swiper: thumbsSwiper }}
            centeredSlides
            className={styles.mySwiper2}
          >
            {picArr.map((item: string) => {
              return (
                <SwiperSlide key={item}>
                  <img src={item} />
                </SwiperSlide>
              );
            })}
          </Swiper>
          <Swiper
            // disableOnInteraction={false}
            autoplay
            onSwiper={setThumbsSwiper as () => void}
            loop={true}
            spaceBetween={10}
            slidesPerView={5}
            freeMode
            watchSlidesVisibility
            watchSlidesProgress
            centeredSlides
            centeredSlidesBounds
            className={styles.mySwiper}
            slidesOffsetBefore={100}
            keyboard={{
              enabled: true,
            }}
          >
            {picArr.map((item: string) => {
              return (
                <SwiperSlide key={item}>
                  <img src={item} />
                </SwiperSlide>
              );
            })}
          </Swiper>
        </div>
        <Alert
          message={intl.formatMessage({
            id: 'pages.welcome.alertMessage',
            defaultMessage: 'Faster and stronger heavy-duty components have been released.',
          })}
          type="success"
          showIcon
          banner
          style={{
            margin: -12,
            marginBottom: 24,
          }}
        />
        <Typography.Text strong>
          <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="Advanced Form" />{' '}
          <a
            href="https://procomponents.ant.design/components/table"
            rel="noopener noreferrer"
            target="__blank"
          >
            <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
          </a>
        </Typography.Text>
        <Button onClick={onTest}>Test</Button>
        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
        <Typography.Text
          strong
          style={{
            marginBottom: 12,
          }}
        >
          <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="Advanced layout" />{' '}
          <a
            href="https://procomponents.ant.design/components/layout"
            rel="noopener noreferrer"
            target="__blank"
          >
            <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
      </Card>
    </PageContainer>
  );
};
